<*****评估报告*****>
<template>
    <div id="compReport" :style="{fontSize:fontSize+'px'}"><!---->
      <Row class="reportHeader">
      	<div style="font-size:20px;">
      		<!--<div class="收起"></div>-->
      		<span>报告 </span>
      		| 
      		<span style="font-weight:bold;">{{USER_NAME}}</span>
      		<!-- <Button type="primary" ghost @click="downloadReports" size="small" style="float:right;margin-top:14px;margin-left:14px;" >
  				<img src="../../../assets/baseInfo/download.png" alt="" style="vertical-align:text-top;"/> 下载报告
  	    	</Button> -->
            <Button type="primary" ghost @click="saveArchive" size="small" style="float:right;margin-top:14px;margin-left:14px;" >
                    归档报告
  	    	</Button>
      	    <ButtonGroup size="small" class="opGroup" style="float:right;margin-top:14px;">
		        <Button icon="ios-remove" @click="zoomIn" :disabled="scale == 0.5 || disSub"></Button>
		        <Button type="dashed" style="border-color:#dcdee2;color:#000;width:40px;">{{scale}}</Button>
		        <Button icon="ios-add" @click="zoomOut" :disabled="scale == 3"></Button>
		    </ButtonGroup>
      	</div>
      </Row>
      <div class="reportContent">
      		<div class="page1 page" :style="pageMargin" >
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<header class="pageHeader">
	      				<!-- <img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:9.714em;height:auto;"/> -->
	      				<img :src="reportImg" v-if="!reportImg" alt="logo" style="width:9.714em;height:auto;"/>
								{{ reportImg }}
	      			</header>
	      			<div class="pageContent">
	      				<div style="text-align:center;">
	      				    <h1 style="font-size:3em;color: #1b1c29;">综合统计报告</h1>
	      				    <!-- <small>LEARNNING ABILITY ASSESSMENT REPORT</small> -->
	      				</div>
	      				<div class="avatar">
	      					<!-- <div class="avatar-bg" :style="{'background-image':`url(${reportImg})`}"> -->
	      					<div class="avatar-bg">
	      						<img :src="reportImg" alt="" v-if="reportImg"/>
	      						<img src="../../../assets/baseInfo/defult.jpg" alt="" v-else/>
	      					</div>
	      				</div>
	      				<div class="examInfo" style="width:20.285em;height:1.143em;margin:3.571em auto;">
	      					<p><span class="itemLabel">昵称</span><span class="itemValue">{{USER_NAME}}</span></p>
	      					<p><span class="itemLabel">单位</span><span class="itemValue">{{company}}</span></p>
	      					<p><span class="itemLabel">报告日期</span><span class="itemValue">{{date}}</span></p>
	      				</div>
	      			</div>
				</div>
	      		<img src="../../../assets/baseInfo/bg.png" alt="" class="pageBg"/>s
      		</div>
      		<div class="page2 page" :style="pageMargin" v-show="reportInfo!={}"> 
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<header class="pageHeader" style="text-align:center;">
	      				<h1 style="font-size:2em;color:#333;">考试题目分析报告</h1>
	      				<div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
	      			</header>
	      			<div style="display: flex; flex-direction: column;" class="pageContent page2Content">
                        <div
                            class="chartTop"
                            style="display: flex; height: 33%; margin-bottom: 10px"
                        >
                            <div
                            id="typeNumPointsAnalysis"
                            class="chart"
                            style="width: 50%; margin-right: 5px"
                            ></div>
                            <div
                            id="typeValidityPointsAnalysis"
                            class="chart"
                            style="width: 50%; margin-left: 5px"
                            ></div>
                        </div>
                        <div
                            class="chartTop"
                            style="display: flex; height: 33%; margin-bottom: 10px"
                        >
                            <div
                            id="difficultyNumAnalysis"
                            class="chart"
                            style="width: 50%; margin-right: 5px"
                            ></div>
                            <div
                            id="difficultyValidityAnalysis"
                            class="chart"
                            style="width: 50%; margin-left: 5px"
                            ></div>
                        </div>
                        <div
                            class="chartTop"
                            style="display: flex; height: 33%; margin-bottom: 10px"
                        >
                            <div
                            id="questionNumAnalysis"
                            class="chart"
                            style="width: 50%; margin-right: 5px"
                            ></div>
                            <div
                            id="questionValidityAnalysis"
                            class="chart"
                            style="width: 50%; margin-left: 5px"
                            ></div>
                        </div>
                        </div>
	      			<footer class="pageFooter">
	      				<Row>
	      					<Col span="4" v-if="showSysLogo">
	      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
	      					</Col>
	      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
	      					   <p style="padding:7px 0;color:#333;">
	      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
	      					   	   <span style="float:right;">
	      					       <!--
	      					       <span>邮编:100089</span>
	      					       <span style="margin-left:20px;">电话:xxx</span>
	      					       -->
	      					       </span>
	      					   </p>
	      					   <p style="color:#666;">{{configInstruction}}
	      					   </p>
	      					</Col>
	      				</Row>
	      			</footer>
	      		</div>
      			<img src="../../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div class="page2 page" :style="pageMargin" v-show="examList.length>0">
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<header class="pageHeader" style="text-align:center;">
	      				<h1 style="font-size:2em;color:#333;">考试成绩趋势</h1>
	      				<div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
	      			</header>
	      			<div class="pageContent page2Content">
								
	      				<Row style="height:100%;">
	      					<div class="chart" style="height:98%;width:100%;padding:.1em;">
		      					<!-- <span style="font-size:0.8em;font-weight:bold;">技能树</span> -->
		      					<div id="examAnalysis"></div>
		      				</div>
	      				</Row>
      				</div>
	      			<footer class="pageFooter">
	      				<Row>
	      					<Col span="4" v-if="showSysLogo">
	      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
	      					</Col>
	      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
	      					   <p style="padding:7px 0;color:#333;">
	      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
	      					   	   <span style="float:right;">
	      					       </span>
	      					   </p>
	      					   <p style="color:#666;">{{configInstruction}}
	      					   </p>
	      					</Col>
	      				</Row>
	      			</footer>
	      		</div>
      			<img src="../../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
            <div class="page2 page" :style="pageMargin" v-show="drill[0].list.length>0" v-if="false">
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}" v-if="false">
	      			<header class="pageHeader" style="text-align:center;">
	      				<h1 style="font-size:2em;color:#333;">演练得分统计</h1>
	      				<div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
	      			</header>
	      			<div class="pageContent page2Content">
						<div style="height:100%;display: flex;flex-direction: column;">
                            <div id="scoreAnalysis" class="chart" style="height:100%;width:100%"></div>
                        </div>
      				</div>
	      			<footer class="pageFooter">
	      				<Row>
	      					<Col span="4" v-if="showSysLogo">
	      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
	      					</Col>
	      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
	      					   <p style="padding:7px 0;color:#333;">
	      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
	      					   	   <span style="float:right;">
	      					       </span>
	      					   </p>
	      					   <p style="color:#666;">{{configInstruction}}
	      					   </p>
	      					</Col>
	      				</Row>
	      			</footer>
	      		</div>
      			<img src="../../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
            <div class="page2 page" :style="pageMargin" v-show="compet[0].list.length>0" v-if="false">
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<header class="pageHeader" style="text-align:center;">
	      				<h1 style="font-size:2em;color:#333;">竞赛得分统计</h1>
	      				<div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
	      			</header>
	      			<div class="pageContent page2Content">
						<div style="height:100%;display: flex;flex-direction: column;">
                            <div id="scoreAnalysisCompet" class="chart" style="height:100%;width:100%"></div>
                        </div>
      				</div>
	      			<footer class="pageFooter">
	      				<Row>
	      					<Col span="4" v-if="showSysLogo">
	      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
	      					</Col>
	      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
	      					   <p style="padding:7px 0;color:#333;">
	      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
	      					   	   <span style="float:right;">
	      					       </span>
	      					   </p>
	      					   <p style="color:#666;">{{configInstruction}}
	      					   </p>
	      					</Col>
	      				</Row>
	      			</footer>
	      		</div>
      			<img src="../../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
            <div class="page2 page" :style="pageMargin" v-show="drillPageNumArr.length>0" v-if="false">
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<header class="pageHeader" style="text-align:center;">
	      				<h1 style="font-size:2em;color:#333;">演练数据列表</h1>
	      				<div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
	      			</header>
	      			<div class="pageContent page2Content">
						<div :style="{height:getContentHeight()+'px'}" v-for="(item,index) in drillPageNumArr" :key="index">
                            <Table stripe :columns="drillCol" :data="item.data" class="rankTable"></Table>
                        </div>
      				</div>
	      			<footer class="pageFooter">
	      				<Row>
	      					<Col span="4" v-if="showSysLogo">
	      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
	      					</Col>
	      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
	      					   <p style="padding:7px 0;color:#333;">
	      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
	      					   	   <span style="float:right;">
	      					       </span>
	      					   </p>
	      					   <p style="color:#666;">{{configInstruction}}
	      					   </p>
	      					</Col>
	      				</Row>
	      			</footer>
	      		</div>
      			<img src="../../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
            <div class="page2 page" :style="pageMargin" v-show="contestPageNumArr.length>0" v-if="false">
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<header class="pageHeader" style="text-align:center;">
	      				<h1 style="font-size:2em;color:#333;">竞赛数据列表</h1>
	      				<div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
	      			</header>
	      			<div class="pageContent page2Content">
						<div :style="{height:getContentHeight()+'px'}" v-for="(item,index) in contestPageNumArr" :key="index">
                            <Table stripe :columns="contestCol" :data="item.data" class="rankTable"></Table>
                        </div>
      				</div>
	      			<footer class="pageFooter">
	      				<Row>
	      					<Col span="4" v-if="showSysLogo">
	      						<img :src="sysLogo" @error="hideSysLogo" v-if="showSysLogo" alt="logo" style="width:100%;height:auto;"/>
	      					</Col>
	      					<Col :span="showSysLogo ? 19 : 24" :offset="showSysLogo ? 1 : 0" style="border-top:1px solid #bcbcbc">
	      					   <p style="padding:7px 0;color:#333;">
	      					   	   <span>中国<span class="dot"></span>{{configAddress}}</span>
	      					   	   <span style="float:right;">
	      					       </span>
	      					   </p>
	      					   <p style="color:#666;">{{configInstruction}}
	      					   </p>
	      					</Col>
	      				</Row>
	      			</footer>
	      		</div>
      			<img src="../../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
            <div class="page1 page" :style="pageMargin"  v-show="reportInfo!={}">
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<div class="pageContent">
                        <header class="pageHeader" style="text-align:center;">
                            <h1 style="font-size:2em;color:#333;">考试分析报告</h1>
                            <div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
                        </header>
						<div class="infoList infoList_p_line">
								<div class="exam_title">考试名称:</div>
								<div class="exam_name text-ellipsis-overflow">
									<!-- <div class="flex"> -->
										<span class="item_name" v-for="(item,index) in reportInfo.data1" :key="index">{{(reportInfo.data1.length == index + 1 ? `${item.name}`:`${item.name}、`)}}</span>
									<!-- </div> -->
							</div>
						</div>

						<div class="infoList infoList_p_line" v-if="false">
								<div class="exam_title">考试成绩:</div>
								<div class="exam_name flex">
									<span class="item_name" v-for="(item,index) in reportInfo.data1" :key="index">{{(reportInfo.data1.length == index + 1 ? `${item.grade}`:`${item.grade}、`)}}</span>
							</div>
						</div>
						<div class="infoList_p_line">
							<div class="exam_title">分析结论:</div>
							<div class="exam_conclusion exam_conclusion_flex">
								<p :class="{margin_top: index > 0 }" v-for="(item,index) in reportInfo.summary" :key="index">{{`${index + 1}、${item}`}}</p>
							</div>
						</div>
	      			</div>
				</div>
	      		<img src="../../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
              <div class="page1 page" :style="pageMargin" v-if="false">
				<div class="pageWrap" :style="{'background-image':`url(${addWaterMarkName})`}">
	      			<div class="pageContent">
                        <header class="pageHeader" style="text-align:center;">
                            <h1 style="font-size:2em;color:#333;">考试、演练、竞赛综合加权评价</h1>
                            <div class="line" style="height:7px;border-top:1px solid #696969;border-bottom:2px solid #696969;margin:10px 0;"></div>
                        </header>
						<div class="infoList infoList_p_line">
								<div class="exam_title">综合加权评价:</div>
								<div class="exam_name text-ellipsis-overflow">
									<!-- <div class="flex"> -->
										<span class="item_name">{{remark}}</span>
									<!-- </div> -->
							</div>
						</div>

						<!-- <div class="infoList infoList_p_line" v-if="false">
								<div class="exam_title">考试成绩:</div>
								<div class="exam_name flex">
									<span class="item_name" v-for="(item,index) in reportInfo.data1" :key="index">{{(reportInfo.data1.length == index + 1 ? `${item.grade}`:`${item.grade}、`)}}</span>
							</div>
						</div>
						<div class="infoList_p_line">
							<div class="exam_title">分析结论:</div>
							<div class="exam_conclusion exam_conclusion_flex">
								<p :class="{margin_top: index > 0 }" v-for="(item,index) in reportInfo.summary" :key="index">{{`${index + 1}、${item}`}}</p>
							</div>
						</div> -->
	      			</div>
				</div>
	      		<img src="../../../assets/baseInfo/bg.png" alt="" class="pageBg"/>
      		</div>
      		<div style="width:42.5em;height:1px;visibility: hidden;"></div>
      		<div style="width:42.5em;height:1px;visibility: hidden;" v-if="scale == 0.5"></div>
      	<!--</Col>-->
      </div>
	  <!--<Button type="primary" ghost @click="downloadReport" class="downBtn">-->
      <!--<Icon type="ios-arrow-round-down" :size="20" /></Button>-->
    </div>
</template>

<script>
import encryption from "@/libs/encryption.js";
import page from "@/components/report/page.vue"
import mixintable from "@/components/report/mixinFun.js"
import HighCharts from 'highcharts'
import highchartsMore from 'highcharts/highcharts-more';
import * as SeriesLabel from 'highcharts/modules/series-label';
import $ from 'jquery'
import G2 from '@antv/g2'
import DataSet from '@antv/data-set';
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import mixin from "@/view/experimenterTrack/mixin"
import {addArchive} from '@/api/experimenterTrack'
import {uploadPdf} from '@/api/exam'
import {getArchiveDeatil} from '@/api/experimenterTrack'
import {
		getCorrectRateOfExaminationIds
	} from '@/api/exam'
import { mapState } from 'vuex'
	import {getSeconds,formatSeconds,dayTime} from '@/libs/utils.js';
//import {competeReport,getSceneInfo} from '@/api/drill_compete'
  export default {
    name: 'examReport',
    components: {
        page
		},
    mixins: [mixin,mixintable],
    data(){
      return {
        userName:'',
        filePath:'',
        remark:'',
        examinationRate:0,
        contestRate:0,
        drillRate:0,
        company:'',
        USER_NAME:'',
        USER_ID:'',
      	classCourseCol:{
      		
      	},
        reportInfo: {},
        sceneId:this.$route.query.id,
        scale:1,
        fontSize:14,
        disSub:false,
        sysLogo:'',
        pageMargin:{},
        showSysLogo:true,
        date:'',
        examList:[],
        generateReportIds:[],
        addCompetArrIds:[],
        addDrillArrIds:[],
        contestTableList:[],
        drillTableList:[],
        contestCol:[],
        contestPageNumArr:[],
        drillCol:[],
        drillPageNumArr:[],
        drill:[
            {name:'个人',list:[]},
            {name:'团队',list:[]},
            ],
        compet:[
            {name:'个人',list:[]},
            {name:'团队',list:[]},
            ]
      }
    },
    computed:{
    },
    created(){
    },
    watch:{
        
    },
    filters:{
    	
    },
    mounted(){
        window.onresize = () => {
            console.log('窗口变化');
            this.drawChart();
            this.drawExamChart()
            this.calcAllPage();
        }
        this.getArchiveDeatil()
    },
    beforeDestroy(){
    	
    },
	methods: {
        getArchiveDeatil(){
            getArchiveDeatil(this.$route.query.id).then(res=>{
                if(res.code==1){
                    let content=res.data.content
                    content=JSON.parse(content)
                    this.company=content.company
                    this.USER_NAME=content.USER_NAME
                    this.date=content.date
                    this.remark=content.remark
                    this.reportInfo=content.reportInfo
                    this.examList=content.examList
                    this.drill=content.drill
                    this.compet=content.compet
                    this.drillPageNumArr=content.drillPageNumArr
                    this.contestPageNumArr=content.contestPageNumArr
                    this.initCol()
                    this.studentExamScoreStatistic()
                    this.queryExamDetailnew()
                    this.drawDillCopet()
                    this.getRankPage()
                }else{
                    this.$Message.warning(res.message)
                }
            })
        },
        getRankPage() {
				this.initCol();
				if(this.contestTableList.length > 0) {
					this.contestPageNumArr = this.getTablePageData(this.contestCol, this.contestTableList);
				}
                if(this.drillTableList.length > 0) {
					this.drillPageNumArr = this.getTablePageData(this.drillCol, this.drillTableList);
				}
				// this.$nextTick(() => {
				// 	this.disDownloadReport = false;
				// });
		},
        initCol() {
				this.contestCol = [{
					key: 'name',
					title: '竞赛名称',
					width: 70
				}, {
					key: 'spendTime',
					title: '竞赛时长',
					per: 0.2
				}, {
					key: 'missionNum',
					title: '竞赛总任务数',
					width: 60
				}, {
					key: 'personFinishMissionNum',
					title: '我完成数',
					width: 60
				},{
					key: 'teamAttackNum',
					title: '团队攻击数',
					per: 0.15
				}, {
					key: 'attackPercent',
					title: '攻击指数',
					per: 0.15
				}, {
					key: 'threatPercent',
					title: '威胁指数',
					per: 0.15
				},{
					key: 'contributePercent',
					title: '贡献度',
					per: 0.2
				}];
                this.drillCol = [{
					key: 'name',
					title: '演练名称',
					width: 70
				}, {
					key: 'spendTime',
					title: '演练时长',
					per: 0.2
				}, {
					key: 'missionNum',
					title: '演练总任务数',
					width: 60
				}, {
					key: 'personFinishMissionNum',
					title: '我完成数',
					width: 60
				},{
					key: 'teamAttackNum',
					title: '团队攻击数',
					per: 0.15
				}, {
					key: 'attackPercent',
					title: '攻击指数',
					per: 0.15
				}, {
					key: 'threatPercent',
					title: '威胁指数',
					per: 0.15
				},{
					key: 'contributePercent',
					title: '贡献度',
					per: 0.2
				}];
			},
        studentExamScoreStatistic(){
                     this.$nextTick(() => {
					    this.drawExamChart()
					});
        },
		hideSysLogo () {
    		this.showSysLogo = false;
    	},
	    setStyle(){
    		let width = (window.innerHtml || document.documentElement.clientWidth);
    		let emEleHeight = Number(window.getComputedStyle(document.getElementById('ele1em')).height.replace('px',''));
      		this.fontSize = width/1519 * 14;
      		if(emEleHeight > this.fontSize){
      			this.disSub = true;
      			this.minFontSize = emEleHeight;
      		}
//			this.scale = (this.fontSize/14).toFixed(1);
			this.setTableColWidth();
    	},
		setPageMargin(){
    		let winWidth = (document.body.clientWidth || document.documentElement.clientWidth);
    		let pageWidth = Math.ceil(document.getElementsByClassName('page')[0].clientWidth);
    		let pageNum = Math.floor(winWidth/pageWidth);
    		let remainWidth = winWidth - pageWidth*pageNum;
    		let margin = Math.floor((remainWidth / (pageNum*2))-2) + 'px';
    		this.pageMargin = {
    			marginLeft: margin,
					marginRight: margin,
    		}
    	},
        timeSort(pre, next) {
            let preTime = pre.startTime ? new Date(pre.startTime).getTime() : new Date().getTime()
            let nextTime = next.startTime ? new Date(next.startTime).getTime() : new Date().getTime()
            return preTime - nextTime
        },
        calcAllPage(){
                this.$nextTick(() => {
                    this.setPageMargin();
                })
        },
        getTypePage(data,rowCount){
            let tableHeight = document.getElementsByClassName('page2Content')[0].clientHeight - this.fontSize*2 - 40;
            tableHeight = 40 * this.fontSize - 50;
            let pageCount = rowCount *  Math.floor(tableHeight / (2.5*(this.fontSize*0.6 < 10 ? 10 : this.fontSize*0.6))); //每页条数
            let pageNum = Math.ceil(data.length/pageCount);
            let listPageNumArr = [];
            for(let i=0;i<pageNum;i++){
                listPageNumArr.push(i+'-'+new Date().getTime()+JSON.stringify(data));
            }
            return {
                pageCount:pageCount,
                pageNum:pageNum,
                listPageNumArr:listPageNumArr
            }
        },
        // 返回值：arg1加上arg2的精确结果
		accAdd(arg1, arg2) {
		    let r1, r2, m;
		    try {
		        r1 = arg1.toString().split(".")[1].length
		    } catch (e) {
		        r1 = 0
		    };
		    try {
		        r2 = arg2.toString().split(".")[1].length
		    } catch (e) {
		        r2 = 0
		    };
		    m = Math.pow(10, Math.max(r1, r2));
		    return (arg1 * m + arg2 * m) / m
		},
		
		// 返回值：arg1减去arg2的精确结果
		accSub(arg1, arg2) {
		    let r1, r2, m, n;
		    try {
		        r1 = arg1.toString().split(".")[1].length
		    } catch (e) {
		        r1 = 0
		    };
		    try {
		        r2 = arg2.toString().split(".")[1].length
		    } catch (e) {
		        r2 = 0
		    };
		    m = Math.pow(10, Math.max(r1, r2));
		    // 动态控制精度长度
		    n = (r1 >= r2) ? r1 : r2;
		    return ((arg1 * m - arg2 * m) / m).toFixed(n);
		},
      zoomIn(){
      	if(this.scale == 0.5){
      		return
      	}
      	this.scale = this.accSub(this.scale,0.1);
      	if(this.scale != 0){
      		this.fontSize = this.fontSize - 0.5;
      	}
        this.calcAllPage();
      	console.log(this.fontSize);
      },
      zoomOut(){
      	if(this.scale == 3){
      		return
      	}
      	this.scale = this.accAdd(this.scale,0.1);
      	if(this.scale != 0){
      		this.fontSize = this.fontSize + 0.5;
      	}
      	this.calcAllPage();
      	console.log(this.fontSize);
      },
      setScale(){
      	
      },
      getCurPageShow(index,dataList,pageInfo){
      	return dataList.slice(index*pageInfo.pageCount,(index+1) * pageInfo.pageCount)
      },
	    makeListRows(index,dataList,pageInfo){
				let list = this.getCurPageShow(index,dataList,pageInfo);
				let aa =  list.map((item,index)=>{
					if(index==0){
						return 0
					}else if(index%2==0){
						return index/2;
					}
				}).filter(f=>f!=null)
				return aa;
		},
			//创建水印底板
		addWaterMark (str) {
				let ctx = document.createElement("canvas");
				ctx.width = 300;
				ctx.height = 300;
				ctx.style.display = "none";
				let cans = ctx.getContext("2d");
				cans.rotate((-20 * Math.PI) / 180);
				cans.font = "12px Microsoft YaHei";
				cans.fillStyle = "rgba(0, 0, 0, .2)";
				cans.textAlign = "left";
				cans.textBaseline = "Middle";
				cans.fillText(str, 10, 130);
				cans.save();
				return ctx.toDataURL();
		},
        queryExamDetailnew () {
						this.$nextTick(() => {
							this.drawChart();
						});
			},
        drawChart() {
            let _this = this;
            let num1 = 0, num2 = 0, num3 = 0
            let num4 = 0, num5 = 0, num6 = 0
            let name = [],error=[],success = []
            this.reportInfo.data2.forEach(item => {
                // numsMax 过滤题型正确数为0 不显示在图表上，直接在这里处理数据，在下面配置处理返回有问题
                let numsMax = item.nums.reduce((pre, cur) => pre + cur)
                if (numsMax > 0) {
                    name.push(this.questionTypeFilter(item.questionType))
                        error.push(numsMax - (item.rightNums.reduce((pre, cur) => pre + cur)))
                        success.push(item.rightNums.reduce((pre, cur) => pre + cur))
                }

                item.nums.forEach((subItem, index) => {
                    if (index === 0) {
                        num1 += subItem
                    } else if (index === 1) {
                        num2 += subItem
                    } else {
                        num3 += subItem
                    }
                })
                item.rightNums.forEach((subItem, index) => {
                    if (index === 0) {
                        num4 += subItem
                    } else if (index === 1) {
                        num5 += subItem
                    } else {
                        num6 += subItem
                    }
                })
            })
            let total = num1 + num2 + num3; // 题目总数量
            let total2 = 0
            this.reportInfo.data3.forEach(item => {
                    total2 += item.nums
            })
            highchartsMore(HighCharts);
            HighCharts.chart('typeNumPointsAnalysis', {
                chart: {
                    type: 'pie',
                    backgroundColor: 'transparent',
                },
                title: {
                    text: '题型分布',
                    // align: 'left',
                    y: this.fontSize * 0.8,
                    style: {
                        fontSize: this.fontSize * 0.8 + 'px',
                        fontWeight: 'bold',
                    }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        shadow: false,
                        // size: '60%', // 饼图大小
                        dataLabels: {
                            distance: 10, // 控制提示线的长度
                            connectorPadding: 1, // 数据到线的据里
                            enabled: true, // true 开启提示线
                            format: '{point.name}:<br/> {point.percentage:.1f} %',
                            style: {
                                fontSize: this.fontSize * 0.6 + 'px',
                            }
                        },
                        showInLegend: false, // 关闭图略
                    }
                },
                series: [{
                    name: '占比',
                    colorByPoint: true,
                    data: this.reportInfo.data2.map(item => {
                        let nums = item.nums.reduce((pre, cur) => pre + cur)
                        return {
                            name: this.questionTypeFilter(item.questionType) + "(" + nums + '/' + total + ")",
                            y: nums
                        }
                    })
                }],
                credits: {
                    enabled: false
                }, //去掉地址
                exporting: {
                    enabled: false
                }, //隐藏导出图片
            });

          

            // 柱状图
            HighCharts.chart('typeValidityPointsAnalysis', {
                chart: {
                    type: 'column',
                    backgroundColor: 'transparent',
                },
                title: {
                    text: '题型正确数',
                    align: 'left',
                    y: this.fontSize * 0.8,
                    style: {
                        fontSize: this.fontSize * 0.8 + 'px',
                        fontWeight: 'bold',
                    }
                },
                xAxis: {
                    categories: name,
                    tickWidth: 0,
                    lineColor: '#999', //设置底线颜色
                    labels: {
                        style: {
                            fontSize: this.fontSize * 0.6,
                        },
                    },
                },
                yAxis: {
                    min: 0,
                    title: {
                        enabled: false
                    },
                    gridLineColor: "#999",
                
                },
                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    floating: true,
                    shadow: false,
                    itemStyle: {
                        fontSize: this.fontSize * 0.6 + 'px',
                    }
                },
                plotOptions: {
                    column: {
                        // allowPointSelect: true, 
                        cursor: 'pointer',
                        stacking: 'normal', // 普通堆叠
                        // showInLegend: false, //是否显示图例说明
                        dataLabels: {
                            enabled: true,
                            style: {
                                textOutline: 'none',
                                fontSize: this.fontSize * 0.6 + 'px',
                            }
                        },
                    }
                },
                series: [
                    {
                        name: '错误',
                        color: 'rgb(247, 163, 92)',
                        data: error
                        // data: this.reportInfo.data2.map(item => {
                        // 	let nums = item.nums.reduce((pre, cur) => pre + cur)
                        // 	if (nums !=0) {
                        // 		return nums - (item.rightNums.reduce((pre, cur) => pre + cur))
                        // 	}
                        // 	return 
                        // })
                    }, {
                        name: '正确',
                        color: 'rgb(124, 181, 236)',
                        data: success
                        // data: this.reportInfo.data2.map(item => {
                        // 	let nums = item.nums.reduce((pre, cur) => pre + cur)
                        // 	if (nums !=0) {
                        // 		return item.rightNums.reduce((pre, cur) => pre + cur)
                        // 	}
                        // 	return 
                        // })
                    }],
                credits: {
                    enabled: false
                }, //去掉地址
                exporting: {
                    enabled: false
                }, //隐藏导出图片
            });



            HighCharts.chart('difficultyNumAnalysis', {
                chart: {
                    type: 'pie',
                    backgroundColor: 'transparent',
                },
                title: {
                    text: '难易度分布',
                    // align: 'left',
                    y: this.fontSize * 0.8,
                    style: {
                        fontSize: this.fontSize * 0.8 + 'px',
                        fontWeight: 'bold',
                    }
                },
                // subtitle: {
                // 	text: '只统计单选、多选、判断',
                // 	y: this.fontSize * 0.6,
                // 	style: {
                // 		fontSize: this.fontSize * 0.6 + 'px',
                // 	}
                // },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        // size: '60%', // 饼图大小
                        dataLabels: {
                            distance: 5, // 控制提示线的长度
                            connectorPadding: 1, // 数据到线的据里
                            enabled: true, // true 开启提示线
                            format: '{point.name}:<br/>{point.percentage:.1f} %',
                            style: {
                                fontSize: this.fontSize * 0.6 + 'px',
                            }
                        },
                        showInLegend: false,
                    }
                },
                series: [{
                    name: '占比',
                    colorByPoint: true,
                    data: ['简单', '中等', '困难'].map((item, index) => {
                        let itemNum = index === 0 ? num1 : index === 1 ? num2 : num3;
                        return {
                            name: item +'(' + itemNum + '/'+ total + ')',
                            y: index === 0 ? num1 : index === 1 ? num2 : num3
                        }
                    })
                }],
                credits: {
                    enabled: false
                }, //去掉地址
                exporting: {
                    enabled: false
                }, //隐藏导出图片
            });

            // 雷达图
            // HighCharts.chart('difficultyValidityAnalysis', {
            // 	chart: {
            // 		polar: true,
            // 		type: 'line',
            // 		backgroundColor: 'transparent',
            // 	},
            // 	title: {
            // 		text: '难易度正确数',
            // 		align: 'left',
            // 		y: this.fontSize * 0.8,
            // 		style: {
            // 			fontSize: this.fontSize * 0.8 + 'px',
            // 			fontWeight: 'bold',
            // 		}
            // 	},
            // 	subtitle: {
            // 		text: '只统计单选、多选、判断',
            // 		y: this.fontSize * 0.6,
            // 		style: {
            // 			fontSize: this.fontSize * 0.6 + 'px',
            // 		}
            // 	},
            // 	tooltip: {},
            // 	legend: {
            // 		enabled: false,
            // 	},
            // 	pane: {
            // 		size: '80%'
            // 	},
            // 	xAxis: {
            // 		categories: ['简单', '中等', '困难'],
            // 		tickmarkPlacement: 'on',
            // 		lineWidth: 0,
            // 		labels: {
            // 			style: {
            // 				fontSize: this.fontSize * 0.6
            // 			},
            // 		},
            // 	},
            // 	yAxis: {
            // 		gridLineInterpolation: 'polygon',
            // 		lineWidth: 0,
            // 		min: 0
            // 	},
            // 	series: [
            // 		{
            // 			name: this.userName,
            // 			pointPlacement: 'on',
            // 			data: [num4, num5, num6]
            // 		}
            // 	],
            // 	credits: {
            // 		enabled: false
            // 	}, //去掉地址
            // 	exporting: {
            // 		enabled: false
            // 	}, //隐藏导出图片
            // });

            // 柱状图
            HighCharts.chart('difficultyValidityAnalysis', {
                chart: {
                    type: 'column',
                    backgroundColor: 'transparent',
                },
                title: {
                    text: '难易度正确数',
                    align: 'left',
                    y: this.fontSize * 0.8,
                    style: {
                        fontSize: this.fontSize * 0.8 + 'px',
                        fontWeight: 'bold',
                    }
                },
                tooltip: {},
                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    floating: true,
                    shadow: false,
                    itemStyle: {
                        fontSize: this.fontSize * 0.6 + 'px',
                    }
                },
                xAxis: {
                    // categories: ['简单', '中等', '困难'],
                    categories: ['简单', '中等', '困难'],
                    tickWidth: 0,
                    lineColor: '#999', //设置底线颜色
                    labels: {
                        style: {
                            fontSize: this.fontSize * 0.6
                        },
                    },
                },
                yAxis: {
                    min: 0,
                    title: {
                        enabled: false
                    },
                    gridLineColor: "#999",
                },
                plotOptions: {
                    column: {
                        // allowPointSelect: true, 
                        cursor: 'pointer',
                        stacking: 'normal', // 普通堆叠
                        // showInLegend: false, //是否显示图例说明
                        dataLabels: {
                            enabled: true,
                            style: {
                                textOutline: 'none',
                                fontSize: this.fontSize * 0.6 + 'px',
                            }
                        },
                    }
                },
                series: [
                    {
                        name: '错误',
                        color: 'rgb(247, 163, 92)',
                        data: [num4, num5, num6].map((item, index) => {
                            let itemNum = index === 0 ? num1 : index === 1 ? num2 : num3;
                            return itemNum - item;
                        })
                    }, {
                        name: '正确',
                        color: 'rgb(124, 181, 236)',
                        data: [num4, num5, num6]
                    }
                ],
                credits: {
                    enabled: false
                }, //去掉地址
                exporting: {
                    enabled: false
                }, //隐藏导出图片
            });
            HighCharts.chart('questionNumAnalysis', {
                chart: {
                    type: 'pie',
                    backgroundColor: 'transparent',
                },
                title: {
                    text: '分类分布',
                    // align: 'left',
                    y: this.fontSize * 0.8,
                    style: {
                        fontSize: this.fontSize * 0.8 + 'px',
                        fontWeight: 'bold',
                    }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        shadow: false,
                        // size: '45%', // 饼图大小
                        dataLabels: {
                            connectorPadding: 1, // 数据到线的据里
                            enabled: true, // true 开启提示线
                            format: '{point.name}:<br/>{point.percentage:.1f} %',
                            distance: 10, // 控制提示线的长度
                            zIndex: 999,
                            style: {
                                fontSize: this.fontSize * 0.6 + 'px',
                            }
                        },
                        showInLegend: false,
                    }
                },
                series: [{
                    name: '占比',
                    colorByPoint: true,
                    data: this.reportInfo.data3.map(category => {
                        return {
                            name: category.type + "(" + category.nums + '/'+ total2 +")",
                            y: category.nums
                        }
                    })
                }],
                credits: {
                    enabled: false
                }, //去掉地址
                exporting: {
                    enabled: false
                }, //隐藏导出图片
            });

            // 雷达图
            // HighCharts.chart('questionValidityAnalysis', {
            // 	chart: {
            // 		polar: true,
            // 		type: 'line',
            // 		backgroundColor: 'transparent',
            // 	},
            // 	title: {
            // 		text: '分类正确数',
            // 		align: 'left',
            // 		y: this.fontSize * 0.8,
            // 		style: {
            // 			fontSize: this.fontSize * 0.8 + 'px',
            // 			fontWeight: 'bold',
            // 		}
            // 	},
            // 	tooltip: {},
            // 	legend: {
            // 		enabled: false,
            // 	},
            // 	pane: {
            // 		size: '80%'
            // 	},
            // 	xAxis: {
            // 		categories: this.reportInfo.data3.map(item => item.type),
            // 		tickmarkPlacement: 'on',
            // 		lineWidth: 0,
            // 		labels: {
            // 			style: {
            // 				fontSize: this.fontSize * 0.6
            // 			},
            // 		},
            // 	},
            // 	yAxis: {
            // 		gridLineInterpolation: 'polygon',
            // 		lineWidth: 0,
            // 		min: 0
            // 	},
            // 	series: [
            // 		{
            // 			name: this.userName,
            // 			pointPlacement: 'on',
            // 			data: this.reportInfo.data3.map(item => item.rightNums)
            // 		}
            // 	],
            // 	credits: {
            // 		enabled: false
            // 	}, //去掉地址
            // 	exporting: {
            // 		enabled: false
            // 	}, //隐藏导出图片
            // });

            // 分类正确数 柱状图
            HighCharts.chart('questionValidityAnalysis', {
                chart: {
                    type: 'column',
                    backgroundColor: 'transparent',
                },
                title: {
                    text: '分类正确数',
                    align: 'left',
                    y: this.fontSize * 0.8,
                    style: {
                        fontSize: this.fontSize * 0.8 + 'px',
                        fontWeight: 'bold',
                    }
                },
                tooltip: {},
                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    floating: true,
                    shadow: false,
                    itemStyle: {
                        fontSize: this.fontSize * 0.6 + 'px',
                    }
                },
                xAxis: {
                    categories: this.reportInfo.data3.map(item => item.type),
                    ttickWidth: 0,
                    lineColor: '#999', //设置底线颜色
                    labels: {
                        style: {
                            fontSize: this.fontSize * 0.6
                        },
                    },
                },
                yAxis: {
                    min: 0,
                    title: {
                        enabled: false
                    },
                    gridLineColor: "#999",
                },
                plotOptions: {
                    column: {
                        // allowPointSelect: true, 
                        cursor: 'pointer',
                        stacking: 'normal', // 普通堆叠
                        // showInLegend: false, //是否显示图例说明
                        dataLabels: {
                            enabled: true,
                            style: {
                                textOutline: 'none',
                                fontSize: this.fontSize * 0.6 + 'px',
                            }
                        },
                    }
                },
                series: [
                    {
                        name: '错误',
                        color: 'rgb(247, 163, 92)',
                        data: this.reportInfo.data3.map(item => {
                            let total = item.nums
                            return total - item.rightNums
                        })
                    }, {
                        name: '正确',
                        color: 'rgb(124, 181, 236)',
                        data: this.reportInfo.data3.map(item =>  item.rightNums)
                    }
                ],
                credits: {
                    enabled: false
                }, //去掉地址
                exporting: {
                    enabled: false
                }, //隐藏导出图片
            });
            SeriesLabel(HighCharts);
        },
        drawDillCopet(){
            let _this = this;
            let scoreOptione = {
					chart: {
						backgroundColor: 'transparent',
					},
					title: {
						text: '演练得分趋势',
						align: 'left',
						y: this.fontSize * 0.8,
						style: {
							fontSize: this.fontSize * 0.8 + 'px',
							fontWeight: 'bold',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					legend: {
						//        	floating: true,
						align: 'left',
						verticalAlign: 'top',
						itemStyle: {
							fontSize: this.fontSize * 0.6 + 'px',
							fontWeight: 'normal',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					xAxis: {
						categories: _this.drill[0].list.map(score => score.name),
						labels: {
							style: {
								fontSize: this.fontSize * 0.6
							},
						},
					},
					plotOptions: {
						series: {
							label: {
								//connectorAllowed: false
							}
						}
					},
					yAxis: {
                        min:0,
						title: {
							text: '得分'
						},
					},
					series: _this.drill.map(user => {
						return {
							name: user.name,
							//type:'line',
							data: user.list.map(score => score.score)
						}
					}),
					credits: {
						enabled: false
					}, //去掉地址
					exporting: {
						enabled: false
					}, //隐藏导出图片
					responsive: {
						rules: [{
							condition: {
								maxWidth: 500
							},
							chartOptions: {
								legend: {
									layout: 'horizontal',
									align: 'left',
									verticalAlign: 'top'
								}
							}
						}]
					}
				};
            let scoreOptioneCompet = {
                chart: {
                    backgroundColor: 'transparent',
                },
                title: {
                    text: '竞赛得分趋势',
                    align: 'left',
                    y: this.fontSize * 0.8,
                    style: {
                        fontSize: this.fontSize * 0.8 + 'px',
                        fontWeight: 'bold',
                        //		            color: 'red'   //这边是改标题的字体大小和颜色
                    }
                },
                legend: {
                    //        	floating: true,
                    align: 'left',
                    verticalAlign: 'top',
                    itemStyle: {
                        fontSize: this.fontSize * 0.6 + 'px',
                        fontWeight: 'normal',
                        //		            color: 'red'   //这边是改标题的字体大小和颜色
                    }
                },
                xAxis: {
                    categories:_this.compet[0].list.map(score => score.name),
                    labels: {
                        style: {
                            fontSize: this.fontSize * 0.6
                        },
                    },
                },
                plotOptions: {
                    series: {
                        label: {
                            //connectorAllowed: false
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: '得分'
                    },
                },
                series: _this.compet.map(user => {
						return {
							name: user.name,
							//type:'line',
							data: user.list.map(score => score.score)
						}
					}),
                credits: {
                    enabled: false
                }, //去掉地址
                exporting: {
                    enabled: false
                }, //隐藏导出图片
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'left',
                                verticalAlign: 'top'
                            }
                        }
                    }]
                }
            };
            SeriesLabel(HighCharts);
            HighCharts.chart('scoreAnalysis', scoreOptione);
            HighCharts.chart('scoreAnalysisCompet', scoreOptioneCompet);
        },
        questionTypeFilter(num) {
            switch (String(num)) {
                case '1':
                    return '单选'
                case '2':
                    return '多选'
                case '3':
                    return '判断'
                case '4':
                    return 'CTF'
                case '5':
                    return '问答题'
                case '6':
                    return '填空题'
                default:
                    break;
            }
        },
        drawExamChart(){
        	const data = this.examList.map(compete => {
        		return {
        			year:compete.startTime,
        			value:compete.score
        		}
        	})
//      	const data = [
//			  { year: '1991-3-4 11:22:33', value: 3 },
//			  { year: '1992', value: 4 },
//			  { year: '1993', value: 3.5 },
//			  { year: '1994', value: 5 },
//			  { year: '1995', value: 4.9 },
//			  { year: '1996', value: 6 },
//			  { year: '1997', value: 7 },
//			  { year: '1998', value: 9 },
//			  { year: '1999', value: 13 }
//			];
			const chart = new G2.Chart({
			  container: 'examAnalysis',
			  forceFit: true,
			  height: 38*this.fontSize,
			  padding:'auto'
			});
			chart.source(data);
			chart.scale('value', {
				alias: '得分',
			  min: 0
			});
			chart.scale('year', {
			  range: [ 0, 1 ]
			});
			chart.tooltip({
			  crosshairs: {
			    type: 'line'
			  }
			});
			chart.line().position('year*value');
			chart.point().position('year*value')
			  .size(4)
			  .shape('circle')
			  .style({
			    stroke: '#fff',
			    lineWidth: 1
			  });
			chart.render();
        }
    },
    destroyed() {
      
    }
  }
</script>

<style scoped >
#competeScor,
#userIntegral{
	width: 100%;
}
#skillTree{
	width: 100%;
}
	#compReport {
    /*padding: 40px 60px;*/
  	background: #f1f4fd;
  }

  .compReportHeader {
    text-align: center;
    border-bottom: 1px solid rgb(212, 216, 225);
  }

  .reportTitle {
    text-align: center;
    font-weight: bold;
    font-size: 22px;
  }

  .reportInfo {
    margin: 30px 0;
  }

  .reportInfo span {
    padding-right: 22px;
  }
  .reportContent{
  	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top:80px;
  }
  .reportContent .title {
    position: relative;
    margin: 46px 0;
    background: linear-gradient(90deg, rgb(234, 241, 255), #fff);
    height: 38px;
    line-height: 38px;
    border-radius: 5px;
  }

  .reportContent .title i {
    position: absolute;
    top: 9px;
    left: -2.5px;
    width: 5px;
    height: 20px;
    background: #2f70ff;
    border-radius: 10px;
  }

  .reportContent .title span {
    font-weight: bold;
    font-size: 18px;
    padding-left: 14px;
  }

  #rankTable {
    /*border-radius: 10px;*/
    border: none;
    border: none;;
    /*box-shadow: 0 0 1px 1px #ddd;*/
  }
  #rankTable .ivu-table,#rankTable .ivu-table th{
  	background-color:transparent;
  	height: 2.5em;
  }
  .downBtn {
    padding: 0px;
    float: right;
    margin-right: 60px;
  }
    /*.ivu-table-body{
        max-height :calc(100vh - 228px);
        overflow:hidden auto;
    }*/
   .reportHeader{
	   	height:54px;
	   	line-height:54px;
	   	padding:0 44px;
	   	background:#fff;
	   	box-shadow:0px 0px 5px #ccc;
	   	position: fixed;
	    top: 0px;
	    width: 100%;
	    background:#fff;
	    z-index:999;
   }
   .reportContent .page{
   	  position:relative;
   	  /*background:url('../../../../assets/exam/bg.jpg') no-repeat;
   	  background-size:100%;*/
   	  box-shadow: 0 0 5px #ccc;
   	  width:42.5em;
   	  height:60.143em;
   	  margin:1.85em 0;
   	  padding:2.14em;
   }
   .pageBg{
   	  position: absolute;
   	  top: 0;
   	  left:0;
   	  width:100%;
   	  height:100%;
   }
   .pageWrap{
   	  position: absolute;
      left: 1.85em;
      right: 1.85em;
      top: 1.85em;
      bottom: 1.85em;
      z-index: 2;
   }
	 .pageWrap{
		padding: 0px !important;
		margin: 0px !important;
	 }
   .page2 .pageContent,.page3 .pageContent{
   		height:42em;
   		min-height: 470px;
   }
   .page2 .pageContent .chart{
   		height:96%;
   		width:98%;
   		border: 1px solid #bbbdbc;
   		/*border-radius: 5px;*/
   }
   .page3 .pageContent{
   		padding:1em;
   		border:1px solid #b3b3b3;
   		overflow:hidden;
   }
   .page .pageFooter{
   	   font-size:0.8em;
   	   /*height:4.8em;*/
   	   margin-top:2em;
   }
   .pageFooter .dot{
	   	width: 2px;
	    height: 2px;
	    /*padding: 1px;*/
	    background: #515a6e;
	    border-radius: 50%;
	    display: inline-block;
	    vertical-align: middle;
	    margin: 2px;
   }
   .page1 .pageHeader{
   	  margin-bottom:6em;
   }
   .page1 .itemLabel{
        display: inline-block;
        /*height: 36px;*/
        width: 4.5em;
        text-align: justify;
        vertical-align: top;
        text-align-last: justify;
        font-size:1em;
        color:#666;
    }
    /*.page1 .itemLabel::after {
        display: inline-block;
        width: 100%;
        content: '';
        height: 0;
    }*/
    .page1 .itemValue{
    	margin-left:1em;
    	font-size:1em;
    	/*font-weight:bold;*/
    	color:#333;
    }
    .page1 .examInfo p{
    	border-bottom: 1px solid #d8dde0;
    	margin-top: 1em;
    	padding:.5em 0;
    }
    .avatar{
    	text-align: center;
    	margin:4em;
    }
    .avatar .avatar-bg{
			position: relative;
			top: 0px;
			left: 0px;
    	display: inline-block;
    	width:12em;
    	height:10em;
    	/* background: url('../../assets/report/avatar-bg.png') no-repeat; */
    	/* background-size: contain; */
    }
    .avatar img{
			width:8em;
    	height:8em;
    	border-radius: 50%;
    	position: absolute;
    	top:50%;
    	left:50%;
			transform: translate(-63%,-49%);
    	/* border:.3em solid #abb0b6; */
    }
  ::-webkit-scrollbar
  {
    width: 5px;  /*滚动条宽度*/
    height: 5px;  /*滚动条高度*/
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track
  {
    border-radius: 2.5px;  /*滚动条的背景区域的圆角*/
    background-color: #e6e6e6;/*滚动条的背景颜色*/
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb
  {
    border-radius: 2.5px;  /*滚动条的圆角*/
    background-color: #aaa;  /*滚动条的背景颜色*/
  }
  .listItem{
  	font-size: 0.6em;
    height: 100%;
    line-height: 2.5em;
  }
	.listItem:nth-child(odd){
		padding-right:6px;
	}
	.listItem:nth-child(even){
		padding-left: 6px;
	}
	.itemRow{
		padding: 10px 0;
		height: auto;
		overflow: visible;
		word-break: break-all;
		border-bottom: 1px dashed #ccc;
	}
</style>
<style>
	#rankTable .ivu-table{
		font-size:0.6em;
	}
    #rankTable .ivu-table,#rankTable .ivu-table th,#rankTable .ivu-table td{
  		background-color:transfer!important;
    }
    #rankTable .ivu-table th,#rankTable .ivu-table td{
  		height: 2.5em;
    }
    #rankTable thead tr th {
    	background-color:#f5f5f5!important;
    	border: none;
    }
    #rankTable tbody tr td {
    	border: none;
    	background-color:transparent!important;
    	border-bottom:1px dashed #ccc;
    }
    #rankTable .ivu-table-overflowX{
  		overflow: hidden;
    }
    #rankTable .ivu-table:before,
	#rankTable .ivu-table:after {
	    background-color: transparent;
	}
</style>
<style scoped>
	.title{
		text-align:center;
		margin-top:10em;
	}
	h1{
		font-size:2em;
		color: #1b1c29;
	}
	h2{
		margin:1em 0;
		font-size:1.57em;
		color: #1b1c29;
	}
	.coverContent{
		width:100%;
		display: flex;
    	flex-direction: column;
    	align-items: center;
	}
	.infoList p {
		border-bottom: 1px solid #d8dde0;
		margin-top: 1em;
		padding: .5em 1em 0.5em 0;
	}

	.infoList_p_line{
		margin-top: 2em;
		width: 100%;
		display: flex;
	}
	.exam_title{
		margin-left: 2em;
		height: 100%;
		width: 20%;
		text-align: end
	}
	.exam_name{
		/* height: 100%; */
		width: 80%;
		text-align: start;
		margin-left: 0.4em;
	}
	.exam_name .item_name{
		/* margin-left: 0.4em; */
		font-size: 1em;
		/* color: #333; */
	}
	.text-ellipsis-overflow{
		text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
		overflow: hidden;
	}

	.exam_conclusion{
		height: 100%;
		width: 80%;
		margin-left: 0.4em;
	}
	.exam_conclusion p{
		width: 100%;
		text-align: start !important;
	}
	.margin_top{
		margin-top: 0.5em;
	}
	.exam_conclusion_flex{
		display: flex;
		flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap
	}
	.flex{
		display: flex;
		flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
	}
	.infoList .itemValue {
		margin-left: 1em;
		font-size: 1em;
		color: #333;
	}
	.infoList .itemLabel {
		display: inline-block;
		width: 5em;
		text-align: justify;
		vertical-align: top;
		text-align-last: justify;
		font-size: 1em;
		color: #666;
	}
</style>
<style scoped src="@/components/report/report.css">
	
</style>